<template>
  <!-- 定制设置 -->
  <div class="customize_setting">
    <div class="setting_inner">
      <!-- 诊所 -->
      <div v-if="user_organizedType == 1" class="setting_left">

        <span v-for="(item, index) in tabList"
          :class="[item.index == tabClick ? 'spanSelected' : 'spanNormal', 'ellipsis']" @click="tabClickHandle(item)">
          <el-tooltip class="box-item" effect="dark" :content="item.title" placement="top">
            <span> {{ item.title }} </span>
          </el-tooltip>

        </span>
      </div>
      <!-- 技工所 -->
      <div v-if="user_organizedType == 2" class="setting_left">
        <span v-for="(item, index) in typeList"
          :class="[item.index == typeClick ? 'spanSelected' : 'spanNormal', 'ellipsis']" @click="typeClickHandle(item)">
          <el-tooltip class="box-item" effect="dark" :content="item.title" placement="top">
            <span>
              {{ item.title }}
            </span>
          </el-tooltip>

        </span>
      </div>
      <!-- 诊所 -->
      <div v-if="user_organizedType == 1" class="setting_right">
        <!-- 数字印模审核报告机构名称 -->
        <div v-if="tabClick == 1" class="setting_name">
          <el-form ref="form" :rules="rules" :size="optionButtonSize" label-position="left" label-width="100px"
            :model="nameForm">
            <el-form-item :label="$t('institutionSetting.jigou32') + '：'" prop="language">
              <el-select v-model="nameForm.language" style="width: 320px"
                :placeholder="$t('institutionSetting.jigou33')">
                <el-option v-for="(item, index) in languageArr" :key="index" :label="item.dictLabel" :value="item.id" />
              </el-select>
            </el-form-item>
            <!-- <el-form-item :label="$t('institutionSetting.jigou37') + '：'" prop="address">
              <el-input
                v-model="nameForm.address"
                style="width: 320px"
                :placeholder="$t('institutionSetting.jigou38')"
              />
            </el-form-item> -->
            <el-form-item :label="$t('institutionSetting.jigou39') + '：'" prop="attachedFile">
              <el-image v-if="nameForm.attachedFile" style="width: 100px; height: 100px; border-radius: 6px"
                crossOrigin="anonymous" :src="nameForm.attachedFile || ''" />
              <el-upload class="upload-demo" action="" :on-change="handleelchange2" :auto-upload="false"
                :show-file-list="false">
                <el-button size="small" type="primary">{{
                  $t('institutionSetting.jigou44')
                }}</el-button>
                <span style="margin-left: 10px; color: #999; font-size: 13px">{{ $t('add.add180') }}:
                  jpeg,jpg,gif,png</span>
              </el-upload>
              <div class="tip">
                <p>{{ $t('institutionSetting.jigou40') }}</p>
              </div>
            </el-form-item>
          </el-form>
        </div>

        <div class="option">
          <el-button type="primary" :size="optionButtonSize" @click="submitHandle">{{
            $t('institutionSetting.jigou41')
          }}</el-button>
          <el-button plain :size="optionButtonSize" @click="resetHandle">{{
            $t('institutionSetting.jigou42')
          }}</el-button>
        </div>
      </div>
      <!-- 技工所 -->
      <div v-if="user_organizedType == 2" class="setting_right">
        <div v-if="tabClick == 1" class="setting_name">
          <el-form ref="form" :rules="rules" :size="optionButtonSize" label-position="left" label-width="100px"
            :model="nameForm">
            <el-form-item :label="$t('institutionSetting.jigou32') + '：'" prop="language">
              <el-select v-model="nameForm.language" style="width: 320px"
                :placeholder="$t('institutionSetting.jigou33')">
                <el-option v-for="(item, index) in languageArr" :key="index" :label="item.dictLabel" :value="item.id" />
              </el-select>
            </el-form-item>
            <!-- <el-form-item :label="$t('institutionSetting.jigou37') + '：'" prop="address">
              <el-input
                v-model="nameForm.address"
                style="width: 320px"
                :placeholder="$t('institutionSetting.jigou38')"
              />
            </el-form-item> -->
            <el-form-item :label="$t('institutionSetting.jigou39') + '：'" prop="attachedFile">
              <el-image v-if="nameForm.attachedFile" style="width: 100px; height: 100px; border-radius: 6px"
                :src="nameForm.attachedFile || ''" />
              <el-upload class="upload-demo" action="" :on-change="handleelchange2" :auto-upload="false"
                :show-file-list="false">
                <el-button size="small" type="primary">{{
                  $t('institutionSetting.jigou44')
                }}</el-button>
                <span style="margin-left: 10px; color: #999; font-size: 13px">{{ $t('add.add180') }}:
                  jpeg,jpg,gif,png</span>
              </el-upload>
              <div class="tip">
                <p>{{ $t('institutionSetting.jigou40') }}</p>
              </div>
            </el-form-item>
          </el-form>
        </div>
        <div class="option">
          <el-button type="primary" :size="optionButtonSize" @click="submitHandle">{{
            $t('institutionSetting.jigou41')
          }}</el-button>
          <el-button plain :size="optionButtonSize" @click="resetHandle">{{
            $t('institutionSetting.jigou42')
          }}</el-button>
        </div>
      </div>

      <historyLogo v-if="logoList && logoList.length > 0" :list="logoList" @getSetting="getSetting"
        @getLogoData="getLogoData" />
    </div>
  </div>
</template>

<script>
import Upload from '@/components/upload/index'; // 附件上传
import { sortDateData } from '@/utils/index';
// 右边的小卡片组件
import historyLogo from '@/views/organizationstructuring/common/historyLogo';
import { formatDate } from '@/utils/index';
export default {
  name: 'BLZMasterCustomize',
  components: {
    Upload,
    historyLogo,
  },
  data() {
    return {
      // 类型切换
      typeList: [
        { title: this.$t('institutionSetting.jigou77'), selected: true, index: 1 },
        // { title: this.$t('add.add185'), selected: true, index: 1 },
        // { title: this.$t('add.add186'), selected: false, index: 2 },
        // { title: this.$t('add.add187'), selected: false, index: 3 },
      ],
      tabList: [
        { title: this.$t('institutionSetting.jigou77'), selected: true, index: 1 },
        // { title: this.$t('add.add179'), selected: false, index: 2 },
      ],
      typeClick: 1,
      tabClick: 1,
      nameForm: {
        language: '',
        title: '',
        // address: '', // 地址
        attachedFile: '', // 附件
        backgroundImg: '', // 背景图
      },
      languageArr: [],
      settingObj: [],
      user_organizedType: '',
      rules: {
        language: [
          {
            required: true,
            message: this.$t('institutionSetting.jigou33'),
            trigger: 'change',
          },
        ],
        // address: [
        //   {
        //     required: true,
        //     message: this.$t('institutionSetting.jigou11'),
        //     trigger: 'blur',
        //   },
        // ],
        attachedFile: [
          {
            required: true,
            message: this.$t('institutionSetting.jigou78'),
            trigger: 'change',
          },
        ],
      },
      logoList: [],
    };
  },

  created() {
    this.user_organizedType = localStorage.getItem('user_organizedType');
    this.getLanguage();
    this.getSetting();
  },

  methods: {
    // 类型切换
    tabClickHandle(item) {
      if (this.tabClick == item.index) {
        return;
      }
      this.tabClick = item.index;
    },
    typeClickHandle(item) {
      if (this.typeClick == item.index) {
        return;
      }
      this.typeClick = item.index;
    },
    getLanguage() {
      this.$http
        .get('/sys/dict/data/page?dictTypeId=9')
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          } else {
            this.languageArr = res.data.list;
          }
        })
        .catch((err) => {
          console.log('err', err);
        });
    },
    getLogoData(data) {
      console.log(data);
      this.nameForm.language = data.language;
      this.nameForm.attachedFile = data.attachedFile;
      // this.
    },
    getSetting() {
      if (this.user_organizedType == 1) {
        if (this.tabClick == 1) {
          this.nameForm.type = 'logo'; // 数字印模审核报告logo
        }
      }
      // 技工所
      if (this.user_organizedType == 2) {
        if (this.typeClick == 1) {
          this.nameForm.type = 'logo'; // 数字印模审核报告机构名称
        }
      }
      this.$http
        .get(
          `/sys/organized/getSetting?deptId=${localStorage.getItem('user_jg_id')}&type=${this.nameForm.type
          }`,
        )
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          } else {
            this.resetHandle();
            this.logoList = JSON.parse(JSON.stringify(res.data));
          }
        })
        .catch((err) => {
          console.log('err', err);
        });
    },
    handleelchange(file, fileList) {
      const formData = new FormData();
      fileList.map((item) => {
        // fileList本来就是数组，就不用转为真数组了
        formData.append('file', item.raw, Date.now() + '.jpeg'); // 将每一个文件图片都加进formdata
      });
      this.$http
        .post('/tools/upload', formData)
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          } else {
            this.nameForm.backgroundImg = res.data.filepath;
          }
        })
        .catch((err) => {
          console.log('err', err);
        });
    },
    handleelchange2(file, fileList) {
      const formData = new FormData();
      fileList.map((item) => {
        // fileList本来就是数组，就不用转为真数组了
        formData.append('file', item.raw, Date.now() + '.jpeg'); // 将每一个文件图片都加进formdata
      });
      this.$http
        .post('/tools/upload', formData)
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          } else {
            this.nameForm.attachedFile = res.data.filepath;

          }
        })
        .catch((err) => {
          console.log('err', err);
        });
    },
    // 重置
    resetHandle() {
      this.nameForm = {
        language: '',
        title: '',
        // address: '', // 地址
        attachedFile: '', // 附件
        backgroundImg: '', // 背景图
      };
      this.$refs.form.resetFields();
    },
    // 提交
    submitHandle() {
      // 诊所
      if (this.user_organizedType == 1) {
        if (this.tabClick == 1) {
          this.nameForm.type = 'logo'; // 数字印模审核报告logo
          // if (!this.nameForm.address) {
          //   return this.$message.error(this.$t('institutionSetting.jigou11'));
          // }
        }
      }
      // 技工所
      if (this.user_organizedType == 2) {
        if (this.typeClick == 1) {
          this.nameForm.type = 'logo'; // 数字印模审核报告机构名称
        }
      }
      this.nameForm.createDate = formatDate(new Date(), 'second');
      this.nameForm.updateDate = formatDate(new Date(), 'second');
      this.$refs['form'].validate((valid) => {
        if (valid) {
          // 上传logo不需要id
          delete this.nameForm.id;
          this.$http
            .put('/sys/organized/updateSetting', this.nameForm)
            .then(({ data: res }) => {
              if (res.code !== 0) {
                return this.$message.error(res.msg);
              } else {
                this.getSetting();
                location.reload();
                return this.$message.success(this.$t('add.add85'));
              }
            })
            .catch((err) => {
              console.log('err', err);
            });
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.customize_setting {
  padding-top: 15px;
  height: 700px;
  position: relative;

  .setting_inner {
    padding-top: 15px;
    // padding-bottom: 50px;
    display: flex;
    height: 100%;

    .setting_left {
      // border: 5px;
      background-color: #f4f4f4;
      display: flex;
      flex-direction: column;
      box-sizing: border-box;
      // height: 120px;
      // width: 160px;
      width: 10%;

      span {
        cursor: pointer;
        font-size: 14px;
        // width: 220px;
        // height: 40px;
        // padding: 12px 22px;
        color: #666666;
        box-sizing: border-box;
      }
    }

    .setting_right {
      position: relative;
      padding-left: 80px;
      width: 65%;
    }
  }

  // 底部按钮
  .option {
    width: 95%;
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0);
    bottom: 0px;
    padding: 20px 0px 0 0;
    text-align: right;
    border-top: 1px solid #f7f2f2;
  }

  // 类型选中
  .spanSelected {
    background-color: rgba(0, 62, 103, 0.1);
    font-size: 16px;
    font-weight: 500;
    color: #003e67;
    padding: 12px 22px;
    box-sizing: border-box;
  }

  .spanNormal {
    background-color: #f4f4f4;
    font-size: 16px;
    font-weight: 400;
    color: #666666;
    padding: 12px 22px;
    box-sizing: border-box;
  }

  .attachment {
    p {
      font-size: 14;
      color: #666666;
    }

    .title {
      font-size: 14;
      color: #666666;
    }
  }
}

.tip {
  p {
    line-height: 30px;
    color: #999;
    font-size: 12;
  }
}
</style>
